<template>
    <div class="menu">
        <ul>
            <li v-for="menu in menustree" :key="menu.id">
              <router-link :to="menu.to">{{menu.text}}</router-link></li>
        </ul>
    </div>
</template>

<script>
export default {
  name: "menu",
  data() {
    return {
      menustree: [
        {
          id: 1,
          to: '/examples/table',
          text: "表格"
        },
        {
          id: 2,
          to: '/examples/tree',
          text: "树形结构"
        }
      ]
    };
  },
  props: {},
  computed: {},
  method: {}
};
</script>

<style lang="less" scoped>
.menu {
  background-color: lightblue;
  width: 80px;
  flex: none;
  overflow-y: auto;
  min-height: 0;

  ul {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;

    list-style: none;
    margin: 0;
    padding: 0;

    li {
        margin: 30px 15px;
        cursor: pointer;
    }
  }
}
</style>
